<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
            <el-breadcrumb-item :to="{ path: '/' }">后台管理</el-breadcrumb-item>
            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
            <el-breadcrumb-item>查询学生信息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="queryParam" ref="queryForm" :inline="true">
            <el-form-item label="学生姓名：">
                <el-input v-model="queryParam.searchWord" clearable placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="学生专业：">
                <el-input v-model="queryParam.major" clearable placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchList()">查询</el-button>
                <el-button type="primary" @click="insert()">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" stripe border size="mini" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
            <el-table-column prop="name" label="学生名字" width="100" align="center"></el-table-column>
            <el-table-column prop="age" label="学生年龄" width="100" align="center"></el-table-column>
            <el-table-column prop="gender" label="学生性别" width="100" align="center"></el-table-column>
            <el-table-column prop="major" label="专业" align="center" width="100"></el-table-column>
            <el-table-column prop="getId" label="学号" align="center" width="100"></el-table-column>
            <el-table-column prop="phoneNumber" label="联系电话" width="180" align="center"></el-table-column>
            <el-table-column prop="identityCard" label="学生身份证" width="180" align="center"></el-table-column>
            <el-table-column prop="created" label="入学时间" align="center" width="180"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" circle
                               @click="handleEdit(scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" circle
                               @click="openDeleteConfirm(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[2, 4, 6, 25]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!-- 弹出的编辑相册的对话框 -->
        <el-dialog title="修改学生" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm">
                <el-form-item label="学生名字" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="学生性别:" :label-width="formLabelWidth">
                    <template>
                        <el-radio v-model="ruleForm.gender" label=男></el-radio>
                        <el-radio v-model="ruleForm.gender" label=女></el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="专业:" :label-width="formLabelWidth">
                    <el-select v-model="ruleForm.major" placeholder="请选择专业">
                        <el-option label="计算机" value="计算机"></el-option>
                        <el-option label="工商管理" value="工商管理"></el-option>
                        <el-option label="应用化学" value="应用化学"></el-option>
                        <el-option label="地理科学" value="地理科学"></el-option>
                        <el-option label="生物科学" value="生物科学"></el-option>
                        <el-option label="统计学" value="统计学"></el-option>
                        <el-option label="市场营销" value="市场营销"></el-option>
                        <el-option label="人力资源管理" value="人力资源管理"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学号" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.getId"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                    <el-input v-model="ruleForm.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item label="入学时间:" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="ruleForm.created"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>

    export default {
        data() {
            return {
                /*表格查询*/
                queryParam: {
                    searchWord: '',
                    major: '',
                },
                pageNum: 1, // 当前第几页
                pageSize: 5,  // 每一个页面限制5条数据
                // 数据总数
                total: 0,
                // pageNum:'',
                // pageSize:5,
                tableData: {

                },
                dialogFormVisible: false,
                ruleForm: {
                    id: '',
                    name: '',
                    age: "",
                    gender: "",
                    major: "",
                    phoneNumber: "",
                    identityCard: "",
                    getId: "",
                    created: ""
                },
                formLabelWidth: '120px',
            };
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.pageNum = 2;
                this.loadStudentList();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum=val;
                this.loadStudentList();
            },
            searchList() {
                this.loadStudentList();
            },
            submitForm() {
                let url = 'http://localhost:9801/students/' + this.ruleForm.name;
                this.axios.get(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        this.tableData = responseBody.data;
                        this.loadStudentList();
                    } else {
                        this.$message.error(responseBody.message);
                    }
                });
            },
            insert() {
                location.href = "/sys-admin/main/student/insert";
            },
            loadStudentList() {
                this.axios.get("http://localhost:9801/students/selectPage", {
                    params: {
                        searchWord: this.queryParam.searchWord,
                        major: this.queryParam.major,
                        pageSize:this.pageSize,
                        pageNum:this.pageNum,
                        total:this.total

                    }
                }).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state=20000){
                        console.log(response);
                        this.tableData = response.data.data.data;
                        this.tableData.total = response.data.data.total;
                    }



                })
            },
            submitEdit() {
                let url = 'http://localhost:9801/students/' + this.ruleForm.id + '/update';
                console.log('url = ' + url);
                let formData = this.qs.stringify(this.ruleForm);
                console.log('formData = ' + formData);
                this.axios
                    .post(url, formData).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        this.$message({
                            message: '修改学生成功！',
                            type: 'success'
                        });
                        this.dialogFormVisible = false;
                        this.loadStudentList();
                    } else if (responseBody.state == 40900) {
                        this.$message.error(responseBody.message);
                    } else {
                        this.$message.error(responseBody.message);
                        this.dialogFormVisible = false;
                        this.loadStudentList();
                    }
                });
            },
            handleEdit(student) {
                let message = '您正在尝试编辑【' + student.id + '-' + student.name + '】的学生详情……';
                console.log(message);
                // this.dialogFormVisible = true;
                // this.ruleForm = album;
                let url = 'http://localhost:9801/students/' + student.id;
                console.log(url);
                this.axios
                    .get(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state == 20000) {
                        this.ruleForm = responseBody.data;
                        this.dialogFormVisible = true;
                    } else {
                        this.$message.error(responseBody.message);
                        this.loadStudentList();
                    }
                });
            },
            openDeleteConfirm(student) {
                let title = '提示';
                let message = '此操作将永久删除【' + student.name + '】学生，是否继续？';
                this.$confirm(message, title, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(student);
                }).catch(() => {
                });
            },
            handleDelete(student) {
                let url = 'http://localhost:9801/students/' + student.id + '/delete';
                console.log('url = ' + url);
                this.axios.post(url).then((response) => {
                    let responseBody = response.data;
                    console.log(responseBody);
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    }
                    this.loadStudentList();
                });
            },
        },
        mounted() {
            this.loadStudentList();
        },
    }
</script>